<template>
  <div class="the-list">

    <div class="panel-table">
      <div class="table-head">
        <span>角色管理</span>
        <div>
          <el-button type="primary" @click="addShowRole = true">添加角色</el-button>
        </div>
      </div>
      
      <el-table v-loading="listLoading" :data="list" fit border highlight-current-row stripe :header-cell-style="{backgroundColor:'#ededed',padding:'12px 0'}">
        <el-table-column label="ID" prop="id" width="80px" />
        <el-table-column label="角色名称" prop="name" />
        <el-table-column label="是否系统预设">
          <template #default="{row}">
            {{row.isSystem == 0 ? '否' : '是'}}
          </template>
        </el-table-column>
        <el-table-column label="按钮权限" prop="button" width="500px">
          <template #default="{row}">
            <el-tag type="info" v-if="!row.button">暂未分配权限</el-tag>
            <template v-else>
              <el-tag type="danger" v-for="btn in row.button.split(',')" :key="btn" style="margin:0 6px 6px 0">{{btn}}</el-tag>
            </template>
          </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createdAt" />
        <el-table-column label="操作" width="320px">
          <template #default="{row}">
            <el-button type="primary" size="small" @click="operationMenu(row)">菜单权限</el-button>
            <el-button type="success" size="small" @click="operationBtn(row)">按钮权限</el-button>
            <el-button type="danger" size="small" @click="deleteMenu(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

    </div>
      
    <el-dialog :title="`分配${currentRole.name}的权限菜单`" v-model="roleShowMenu" @close="closeRole" width="30%">
      <div class="list-icon">
        <el-tree ref="tree" :data="roleList" node-key="id" default-expand-all show-checkbox :default-checked-keys="checkedKeys" :props="defaultProps">
        </el-tree>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="roleShowMenu = false">取 消</el-button>
          <el-button type="primary" @click="submitRole">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog :title="`${!currentRole.name ? '添加':'修改'}角色`" v-model="addShowRole" @close="closeRole" width="30%">
      <div class="list-icon">
        <el-input v-model="roleName" placeholder="请输入角色名称"></el-input>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addShowRole = false">取 消</el-button>
          <el-button type="primary" @click="addRole">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog title="按钮权限" v-model="btnShowRole" @close="closeRole" width="30%">
      <div class="list-icon">
        <el-checkbox-group v-model="checkedBtn">
          <el-checkbox v-for="btn in roleBtnList" :label="btn.id" :key="btn.id">{{btn.remark}}: {{btn.code}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="btnShowRole = false">取 消</el-button>
          <el-button type="primary" @click="addBtnRole">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPermissionRoleList,
  getPermissionResourceList,
  editPermissionRole,
  addPermissionRoleList,
  editStash,
  permissionRoleGetResource,
  deletePermissionRole,
  getButtonList,
  buttonEdit,
  permissionRoleGetButton,
} from "@/api/system";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  name: "systemRole",
  data() {
    return {
      list: [],
      currentRole: {
        id: "",
        name: "",
      },
      roleShowMenu: false,
      defaultProps: {
        children: "children",
        label: "label",
      },
      roleList: [],
      addShowRole: false,
      roleName: "",
      checkedKeys: [],
      btnShowRole: false,
      checkedBtn: [],
      roleBtnList: [],
    };
  },
  created() {
    this.getList();
    this.getResource();
    this.getButtonList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      getPermissionRoleList({
        name: "",
      }).then((res) => {
        this.listLoading = false;
        if (res.code == 0) {
          this.list = res.data.items;
        }
      });
    },
    getResource() {
      getPermissionResourceList().then((res) => {
        if (res.code === 0) {
          this.roleList = res.data;
        }
      });
    },
    getButtonList() {
      getButtonList().then((res) => {
        if (res.code === 0) {
          this.roleBtnList = res.data;
        }
      });
    },
    operationMenu(row) {
      this.currentRole = {
        id: row.id,
        name: row.name,
      };
      this.roleShowMenu = true;
      this.$nextTick(() => {
        this.$refs.tree.setCheckedKeys([]);
      });
      permissionRoleGetResource(row.id).then((res) => {
        if (res.code === 0) {
          this.checkedKeys = res.data;
        }
      });
    },
    operationBtn(row) {
      this.btnShowRole = true;
      this.currentRole = {
        id: row.id,
        name: row.name,
      };
      permissionRoleGetButton(row.id).then((res) => {
        if (res.code === 0) {
          this.checkedBtn = this.getArrayId(res.data);
        }
      });
    },
    addBtnRole() {
      buttonEdit({
        id: this.currentRole.id,
        buttonId: this.checkedBtn,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success("操作成功");
          this.getList();
          this.btnShowRole = false;
          this.checkedBtn = [];
        }
      });
    },
    deleteMenu(row) {
      ElMessageBox.confirm("是否确认删除").then(() => {
        deletePermissionRole(row.id).then((res) => {
          if (res.code === 0) {
            ElMessage.success("操作成功");
            this.getList();
          }
        });
      });
    },
    submitRole() {
      let arr = this.$refs.tree.getCheckedNodes();
      editPermissionRole({
        roleId: this.currentRole.id,
        resourceIds: this.getArrayId(arr),
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success("操作成功");
          this.getList();
          this.roleShowMenu = false;
          this.$refs.tree.setCheckedKeys([]);
        }
      });
    },
    // 状态管理
    editStash(row) {
      editStash({
        id: row.id,
        status: row.staus == 1 ? 2 : 1,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success("操作成功");
          this.getList();
        }
      });
    },
    // 添加角色
    addRole() {
      addPermissionRoleList({
        name: this.roleName,
        isSystem: 0,
      }).then((res) => {
        if (res.code === 0) {
          ElMessage.success("操作成功");
          this.getList();
          this.addShowRole = false;
        }
      });
    },
    closeRole() {
      this.currentRole = {
        id: "",
        name: "",
      };
      this.checkedBtn = [];
    },
    getArrayId(data) {
      let _currnet = [];
      data = data || [];
      for (let i = 0, len = data.length; i < len; i++) {
        _currnet.push(data[i].id);
      }
      return _currnet;
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/styles/tablePage.scss";
</style>
